Panduan komprehensif untuk menemukan dan berinteraksi dengan Human Interface Devices (HID) menggunakan WebHID API di JavaScript. Pelajari enumerasi perangkat, pemfilteran, dan praktik terbaik koneksi.
Enumerasi Perangkat WebHID Frontend: Penemuan Perangkat Terhubung dengan JavaScript
WebHID API membuka potensi bagi aplikasi web untuk berkomunikasi langsung dengan berbagai macam Human Interface Devices (HID) yang biasanya hanya dapat diakses oleh aplikasi native. Ini membuka kemungkinan menarik untuk menciptakan pengalaman web inovatif yang berinteraksi dengan perangkat keras khusus seperti kontroler game, perangkat input kustom, instrumen ilmiah, dan banyak lagi. Panduan komprehensif ini membahas konsep inti enumerasi perangkat, yang merupakan langkah pertama yang krusial dalam membangun koneksi dengan perangkat HID yang diinginkan.
Apa itu WebHID API?
WebHID API memungkinkan aplikasi web untuk mengakses Human Interface Devices. Perangkat ini mencakup kategori yang luas, termasuk:
- Kontroler Game: Joystick, gamepad, setir balap
- Perangkat Input: Keyboard, mouse, trackball
- Kontrol Industri: Panel kontrol khusus, antarmuka sensor
- Instrumen Ilmiah: Perangkat akuisisi data, alat ukur
- Perangkat Keras Kustom: Perangkat input yang dibuat khusus untuk tujuan tertentu
Tidak seperti API peramban lama yang menawarkan dukungan HID terbatas, WebHID API menyediakan akses langsung ke perangkat HID, memungkinkan pengembang untuk membuat aplikasi web yang lebih kaya dan lebih interaktif. Bayangkan mengendalikan lengan robot di laboratorium jarak jauh, memanipulasi model 3D dengan perangkat input kustom, atau menerima data sensor langsung di dasbor berbasis web - semua di dalam peramban.
Memahami Enumerasi Perangkat HID
Sebelum Anda dapat berinteraksi dengan perangkat HID, aplikasi web Anda perlu menemukan perangkat mana yang terhubung ke sistem pengguna. Proses ini disebut enumerasi perangkat. WebHID API menyediakan mekanisme untuk meminta akses ke perangkat HID tertentu berdasarkan ID vendor (VID) dan ID produk (PID) atau dengan menggunakan filter yang lebih luas.
Proses ini biasanya melibatkan langkah-langkah berikut:
- Meminta Akses Perangkat: Aplikasi web meminta pengguna untuk memilih perangkat HID menggunakan
navigator.hid.requestDevice(). - Memfilter Perangkat: Anda dapat menentukan filter untuk mempersempit daftar perangkat yang disajikan kepada pengguna. Filter ini didasarkan pada VID dan PID perangkat.
- Menangani Pemilihan Perangkat: Pengguna memilih perangkat dari daftar.
- Membuka Perangkat: Aplikasi membuka koneksi ke perangkat yang dipilih.
- Transfer Data: Setelah koneksi terjalin, aplikasi dapat mengirim dan menerima data dari perangkat.
Panduan Langkah-demi-Langkah untuk Enumerasi Perangkat
1. Meminta Akses Perangkat dengan Filter
Metode navigator.hid.requestDevice() adalah titik masuk untuk meminta akses ke perangkat HID. Metode ini menerima argumen `filters` opsional, yang merupakan sebuah array objek yang menentukan VID dan PID dari perangkat yang ingin Anda temukan.
Berikut adalah contoh cara meminta akses ke perangkat dengan VID dan PID tertentu:
async function requestHIDDevice() {
try {
const devices = await navigator.hid.requestDevice({
filters: [
{
vendorId: 0x1234, // Ganti dengan Vendor ID perangkat Anda
productId: 0x5678 // Ganti dengan Product ID perangkat Anda
},
// Tambahkan lebih banyak filter untuk perangkat lain jika diperlukan
]
});
if (devices.length > 0) {
const device = devices[0]; // Gunakan perangkat pertama yang dipilih
console.log("HID Device Found:", device);
// Buka perangkat dan mulai komunikasi
await openHIDDevice(device);
} else {
console.log("No HID device selected.");
}
} catch (error) {
console.error("Error requesting HID device:", error);
}
}
// Contoh penggunaan (misalnya, dipicu oleh klik tombol):
document.getElementById('requestButton').addEventListener('click', requestHIDDevice);
Pertimbangan Penting:
- Vendor ID (VID) dan Product ID (PID): Ini adalah pengidentifikasi unik yang ditetapkan untuk perangkat USB dan Bluetooth. Anda perlu mendapatkan VID dan PID dari perangkat target Anda dari dokumentasi produsen atau menggunakan alat sistem (misalnya, Device Manager di Windows, System Information di macOS, atau `lsusb` di Linux).
- Persetujuan Pengguna: Metode
requestDevice()menampilkan prompt izin yang dikontrol oleh peramban kepada pengguna, memungkinkan mereka untuk memilih perangkat HID mana yang akan diberikan akses. Ini adalah langkah keamanan yang krusial untuk mencegah situs web berbahaya mengakses perangkat keras sensitif tanpa persetujuan pengguna. - Filter Ganda: Anda dapat menyertakan beberapa filter dalam array `filters` untuk meminta akses ke perangkat dengan VID dan PID yang berbeda. Ini berguna jika aplikasi Anda mendukung beberapa konfigurasi perangkat keras.
2. Mendapatkan Informasi Perangkat
Setelah pengguna memilih perangkat, metode requestDevice() mengembalikan sebuah array objek HIDDevice. Setiap objek HIDDevice berisi informasi tentang perangkat, seperti VID, PID, usagePage, usage, dan collections. Anda dapat menggunakan informasi ini untuk mengidentifikasi dan mengonfigurasi perangkat lebih lanjut.
async function openHIDDevice(device) {
try {
await device.open();
console.log("HID Device Opened:", device.productName);
// Dengarkan laporan input
device.addEventListener("inputreport", event => {
const { data, reportId } = event;
const uint8Array = new Uint8Array(data.buffer);
console.log(`Received input report ${reportId}:`, uint8Array);
// Proses data laporan input
});
device.addEventListener("disconnect", event => {
console.log("HID Device Disconnected:", device.productName);
// Tangani pemutusan koneksi perangkat
});
} catch (error) {
console.error("Error opening HID device:", error);
}
}
Properti Perangkat:
vendorId: ID vendor perangkat.productId: ID produk perangkat.productName: Nama produk yang dapat dibaca manusia.collections: Sebuah array objek HIDCollectionInfo yang menjelaskan koleksi HID perangkat (laporan, fitur, dll.). Ini bisa sangat kompleks dan hanya diperlukan untuk perangkat yang rumit.
3. Menangani Koneksi dan Pemutusan Perangkat
WebHID API menyediakan event untuk memberitahu aplikasi Anda ketika sebuah perangkat terhubung atau terputus. Anda dapat mendengarkan event `connect` dan `disconnect` pada objek `navigator.hid`.
navigator.hid.addEventListener("connect", event => {
const device = event.device;
console.log("HID Device Connected:", device);
// Tangani koneksi perangkat (misalnya, buka kembali perangkat)
});
navigator.hid.addEventListener("disconnect", event => {
const device = event.device;
console.log("HID Device Disconnected:", device);
// Tangani pemutusan koneksi perangkat (misalnya, bersihkan sumber daya)
});
Praktik Terbaik untuk Manajemen Koneksi:
- Enumerasi Ulang saat Terhubung: Ketika perangkat terhubung, seringkali merupakan praktik yang baik untuk melakukan enumerasi ulang perangkat untuk memastikan aplikasi Anda memiliki daftar yang terbaru.
- Pembersihan Sumber Daya saat Terputus: Ketika perangkat terputus, lepaskan semua sumber daya yang terkait dengannya (misalnya, tutup koneksi perangkat, hapus event listener).
- Penanganan Kesalahan: Terapkan penanganan kesalahan yang kuat untuk menangani situasi di mana perangkat gagal terhubung atau terputus secara tak terduga dengan baik.
Teknik Pemfilteran Perangkat Tingkat Lanjut
Di luar pemfilteran VID dan PID dasar, WebHID API menawarkan teknik yang lebih canggih untuk menargetkan perangkat tertentu. Ini sangat berguna ketika berhadapan dengan perangkat yang memiliki banyak antarmuka atau fungsionalitas.
1. Memfilter berdasarkan Usage Page dan Usage
Perangkat HID diatur ke dalam *usage pages* dan *usages*, yang mendefinisikan jenis fungsionalitas yang disediakan perangkat. Misalnya, keyboard termasuk dalam usage page "Generic Desktop" dan memiliki usage "Keyboard". Anda dapat memfilter perangkat berdasarkan usage page dan usage mereka untuk menargetkan jenis perangkat tertentu.
async function requestSpecificKeyboard() {
try {
const devices = await navigator.hid.requestDevice({
filters: [
{
usagePage: 0x01, // Halaman Desktop Generik
usage: 0x06 // Penggunaan Keyboard
}
]
});
// ... (sisa kode untuk menangani perangkat)
} catch (error) {
console.error("Error requesting HID device:", error);
}
}
Menemukan Nilai Usage Page dan Usage:
- Tabel Penggunaan HID: Tabel penggunaan HID resmi (diterbitkan oleh USB Implementers Forum) mendefinisikan usage pages dan usages standar untuk berbagai jenis perangkat.
- Dokumentasi Perangkat: Dokumentasi produsen perangkat mungkin menentukan nilai usage page dan usage untuk perangkat mereka.
- Deskriptor Laporan HID: Untuk skenario tingkat lanjut, Anda dapat menganalisis deskriptor laporan HID dari sebuah perangkat untuk menentukan usage pages dan usages yang didukungnya.
2. Menangani Banyak Antarmuka
Beberapa perangkat HID mengekspos banyak antarmuka, masing-masing dengan serangkaian fungsionalitasnya sendiri. WebHID API memperlakukan setiap antarmuka sebagai perangkat HID yang terpisah. Untuk mengakses antarmuka tertentu, Anda mungkin perlu menggabungkan pemfilteran VID/PID dengan pemfilteran usage page/usage untuk menargetkan antarmuka yang diinginkan.
Contoh Praktis dan Kasus Penggunaan
1. Membangun Antarmuka Kontroler Game Kustom
Bayangkan Anda sedang membangun game berbasis web dan ingin mendukung kontroler game kustom. Anda dapat menggunakan WebHID API untuk membaca input langsung dari tombol, joystick, dan kontrol lain dari kontroler. Ini memungkinkan Anda untuk menciptakan pengalaman bermain game yang sangat responsif dan imersif.
2. Membuat Kontroler MIDI Berbasis Web
Musisi dan insinyur audio dapat memperoleh manfaat dari kontroler MIDI berbasis web yang berinteraksi dengan digital audio workstations (DAW) atau synthesizer. WebHID API memungkinkan Anda untuk membangun kontroler MIDI kustom yang mengirim dan menerima pesan MIDI langsung di peramban.
3. Berinteraksi dengan Instrumen Ilmiah
Peneliti dan ilmuwan dapat menggunakan WebHID API untuk berinteraksi dengan instrumen ilmiah, seperti perangkat akuisisi data, sensor, dan alat ukur. Ini memungkinkan mereka untuk mengumpulkan dan menganalisis data langsung di dasbor atau alat analisis berbasis web.
4. Aplikasi Aksesibilitas
WebHID memberikan peluang untuk menciptakan teknologi bantu. Sebagai contoh, perangkat input khusus untuk pengguna dengan gangguan motorik dapat diintegrasikan langsung ke dalam aplikasi web, memberikan pengalaman yang lebih disesuaikan dan dapat diakses. Contoh global mungkin termasuk mengintegrasikan perangkat pelacak mata khusus untuk navigasi bebas genggam atau susunan tombol yang dapat disesuaikan untuk akses sakelar tunggal di berbagai bahasa dan metode input.
Kompatibilitas Lintas Peramban dan Pertimbangan Keamanan
1. Dukungan Peramban
WebHID API saat ini didukung di peramban berbasis Chromium (Chrome, Edge, Opera) dan sedang dalam pengembangan untuk peramban lain. Sebelum menerapkan WebHID API di aplikasi Anda, penting untuk memeriksa kompatibilitas peramban dan menyediakan mekanisme fallback untuk peramban yang tidak mendukung API tersebut.
2. Pertimbangan Keamanan
WebHID API dirancang dengan mempertimbangkan keamanan. Peramban akan meminta izin kepada pengguna sebelum mengizinkan aplikasi web mengakses perangkat HID. Ini mencegah situs web berbahaya mengakses perangkat keras sensitif tanpa persetujuan pengguna. Lebih lanjut, WebHID API beroperasi di dalam sandbox keamanan peramban, membatasi akses aplikasi ke sumber daya sistem.
- Hanya HTTPS: WebHID, seperti API web kuat lainnya, memerlukan konteks aman (HTTPS) untuk beroperasi.
- Gestur Pengguna: Meminta akses perangkat biasanya memerlukan gestur pengguna (misalnya, klik tombol) untuk mencegah permintaan akses yang tidak diminta.
- API Izin: Permissions API dapat digunakan untuk menanyakan dan mengelola izin WebHID.
Pemecahan Masalah Umum
1. Perangkat Tidak Ditemukan
Jika aplikasi Anda tidak dapat menemukan perangkat HID, periksa kembali VID dan PID. Pastikan keduanya cocok dengan pengidentifikasi sebenarnya dari perangkat. Juga, verifikasi bahwa perangkat terhubung dengan benar dan dikenali oleh sistem operasi.
2. Izin Ditolak
Jika pengguna menolak izin untuk mengakses perangkat HID, aplikasi Anda tidak akan dapat berkomunikasi dengannya. Tangani skenario ini dengan baik dengan menampilkan pesan kepada pengguna dan menjelaskan mengapa akses diperlukan. Pertimbangkan untuk menyediakan cara alternatif bagi pengguna untuk berinteraksi dengan aplikasi Anda.
3. Masalah Format Data
Perangkat HID sering menggunakan format data kustom untuk mengirim dan menerima data. Anda perlu memahami format data perangkat dan mengimplementasikan logika parsing dan serialisasi yang sesuai di aplikasi Anda. Konsultasikan dokumentasi produsen perangkat untuk informasi tentang format data.
Kesimpulan
WebHID API memberdayakan pengembang web untuk menciptakan aplikasi web yang inovatif dan interaktif yang berkomunikasi langsung dengan Human Interface Devices. Dengan memahami prinsip-prinsip enumerasi perangkat, pemfilteran, dan manajemen koneksi, Anda dapat membuka potensi penuh dari WebHID API dan menciptakan pengalaman pengguna yang menarik. Manfaatkan kekuatan WebHID untuk menghubungkan web dengan dunia fisik, mendorong kemungkinan baru untuk kreativitas, produktivitas, dan aksesibilitas di seluruh dunia.